<template>
  <view class="card-box">
    <view class="card-title">
      <img
        src="https://cdn1.visiotrip.com/h5AndMini/2023-11-11/order_icon.png"
        class="title-icon"
      />
      <view class="title-txt single-line-text">{{info.orderTitle}}</view>
    </view>
    <view class="card-content">
      <view class="content-text" @click="orderInfo(info.orderId)">订单编号：{{info.orderId}}</view>
      <view class="content-text" @click="orderInfo(info.orderId)">{{info.useDate}}</view>
      <view class="content-text">支付金额：{{info.payAmount}}</view>
      <view class="content-more" 
        @click="orderItemClick"
        :data-spmCntSuffix="'ChatAiPage.orderCard@1.more'"
        :data-custom="1"
        :data-spm="1"
      >
        <text>查看更多订单</text>
        <uni-icons type="forward" color="#5876D6" size="12"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
  },
  props: {
    info: {
      type: Object,
    },
  },
  data() {
    return {
      marketDetailData: "",
    };
  },
  mounted() {
  },
  methods: {
    tapMore() {
    },
    //订单按钮跳转
		orderItemClick() {
			if (!this.$isLogin()) {
				return;
			}
			const url = '/packageB/pages/myOrderList/myOrderList'
			this.$navTo(url, {
				status:-1, key:-1
			}, 'navigateTo')
		},
    //订单按钮跳转
		orderInfo(orderId) {
			if (!this.$isLogin()) {
				return;
			}
			const url = '/packageApp/pages/orderCode/ordercode'
			this.$navTo(url, {
				orderId
			}, 'navigateTo')
		},
  },
};
</script>

<style lang="scss" scoped>
.card-box {
  width: 100%;
  min-height: 100rpx;
  background: rgba(229, 235, 255, 1);
  border-radius: 26rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10.8695652173913px);
  margin: 20rpx auto 0 auto;
  .card-title {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 24rpx;
    height: 82rpx;
    .title-icon {
      width: 36rpx;
      height: 36rpx;
    }
    .title-txt {
      color: $sl-color-btn-background;
      height: 28rpx;
      font-size: 28rpx;
      font-weight: 600;
      padding-left: 8rpx;
      line-height: 28rpx;
      flex: 1;
    }
  }
  .card-content {
    width: 100%;
    height: 244rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.5);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10.8695652173913px);
    padding: 22rpx 24rpx 30rpx 24rpx;
    border-radius: 0rpx 0rpx 26rpx 26rpx;
    .content-text {
      height: 28rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #767697;
      line-height: 28rpx;
    }
    .content-more {
      height: 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: $sl-color-blue;
      line-height: 24rpx;
    }
  }
}
</style>
